<template>
  <div class="finance-management">
    <div class="page-header">
      <h2>财务管理</h2>
      <el-button type="primary" @click="exportFinanceData">导出财务报表</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="收入明细" name="income">
        <div class="summary-cards">
          <el-card class="summary-card">
            <template #header>
              <div class="card-header">
                <span>今日收入</span>
              </div>
            </template>
            <div class="amount">¥{{ todayIncome }}</div>
          </el-card>
          <el-card class="summary-card">
            <template #header>
              <div class="card-header">
                <span>本月收入</span>
              </div>
            </template>
            <div class="amount">¥{{ monthIncome }}</div>
          </el-card>
          <el-card class="summary-card">
            <template #header>
              <div class="card-header">
                <span>待结算</span>
              </div>
            </template>
            <div class="amount">¥{{ pendingAmount }}</div>
          </el-card>
        </div>

        <el-table :data="transactions" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="date" label="交易日期" width="180" />
          <el-table-column prop="orderNo" label="订单编号" width="180" />
          <el-table-column prop="amount" label="金额">
            <template #default="scope">
              ¥{{ scope.row.amount }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="提现管理" name="withdrawal">
        <el-form :model="withdrawalForm" label-width="100px" class="withdrawal-form">
          <el-form-item label="提现金额">
            <el-input-number v-model="withdrawalForm.amount" :min="100" :step="100" />
          </el-form-item>
          <el-form-item label="提现账户">
            <el-select v-model="withdrawalForm.account" placeholder="请选择提现账户">
              <el-option label="工商银行 (****1234)" value="icbc" />
              <el-option label="支付宝 (156****8888)" value="alipay" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitWithdrawal">申请提现</el-button>
          </el-form-item>
        </el-form>

        <div class="withdrawal-history">
          <h3>提现记录</h3>
          <el-table :data="withdrawalHistory" style="width: 100%">
            <el-table-column prop="date" label="申请日期" />
            <el-table-column prop="amount" label="金额">
              <template #default="scope">
                ¥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="account" label="提现账户" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getWithdrawalStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('income');

// 财务概览数据
const todayIncome = ref(1234.56);
const monthIncome = ref(45678.90);
const pendingAmount = ref(3456.78);

// 交易记录数据
const transactions = ref([
  {
    date: '2024-03-15 14:30:00',
    orderNo: 'ORD20240315001',
    amount: 299.00,
    type: '商品销售',
    status: 'completed'
  },
  {
    date: '2024-03-15 15:20:00',
    orderNo: 'ORD20240315002',
    amount: 599.00,
    type: '商品销售',
    status: 'pending'
  }
]);

// 提现表单
const withdrawalForm = ref({
  amount: 100,
  account: ''
});

// 提现记录
const withdrawalHistory = ref([
  {
    date: '2024-03-14',
    amount: 5000,
    account: '工商银行 (****1234)',
    status: '已完成'
  },
  {
    date: '2024-03-10',
    amount: 3000,
    account: '支付宝 (156****8888)',
    status: '处理中'
  }
]);

const getStatusType = (status) => {
  const types = {
    completed: 'success',
    pending: 'warning',
    failed: 'danger'
  };
  return types[status] || 'info';
};

const getStatusText = (status) => {
  const texts = {
    completed: '已完成',
    pending: '处理中',
    failed: '失败'
  };
  return texts[status] || status;
};

const getWithdrawalStatusType = (status) => {
  return status === '已完成' ? 'success' : 'warning';
};

const exportFinanceData = () => {
  ElMessage.success('导出功能待实现');
};

const submitWithdrawal = () => {
  if (!withdrawalForm.value.account) {
    ElMessage.warning('请选择提现账户');
    return;
  }
  ElMessage.success('提现申请已提交');
};
</script>

<style scoped>
.finance-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #2c3e50;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.summary-card {
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.withdrawal-form {
  max-width: 500px;
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.withdrawal-history {
  margin-top: 30px;
}

h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}
</style> 